<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>菜品类别编辑</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <i th:replace="~{common :: baseUrl}"></i>
</head>
<body>
<form class="layui-form layui-form-pane" action=""  lay-filter="example">



    <div class="container">
        <div class="row clearfix">
            <div class="col-md-6 column">

                <div class="layui-form-item">
                    <label class="layui-form-label">订单编号</label>
                    <div class="layui-input-inline">
                        <input type="text" readonly name="id" id="orderId" lay-verify="required" th:value="${order.id}" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">客户名称</label>
                    <div class="layui-input-inline">
                        <select name="clientId" id="clientId"   lay-verify="required" disabled>
                            <option th:each="f : ${orderClientList}"  th:value="${f.id}" th:text="${f.name}" th:selected="${order.clientId eq f.id}"></option>
                        </select>
                    </div>
                </div>


                <div class="layui-form-item">
                    <label class="layui-form-label">服装名称</label>
                    <div class="layui-input-inline">
                        <select name="clothingId" id="clothingId"  lay-verify="required" disabled >
                            <option th:each="f : ${clothingList}"  th:value="${f.id}" th:text="${f.name}" th:selected="${order.clothingId eq f.id}"></option>
                        </select>
                    </div>
                </div>


                <div class="layui-form-item">
                    <label class="layui-form-label">订购数量</label>
                    <div class="layui-input-inline">
                        <input type="text" name="orderNum" lay-verify="number" readonly th:value="${order.orderNum}" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>




                <div class="layui-form-item">
                    <label class="layui-form-label">单价</label>
                    <div class="layui-input-inline">
                        <input type="text" name="unitPrice" readonly  th:value="${order.unitPrice}" lay-verify="number" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>


            </div>
            <div class="col-md-6 column">

                <div class="layui-form-item" pane="">
                    <label class="layui-form-label">订单状态</label>
                    <div class="layui-input-block">
                        <input type="radio" name="status" value="1" title="未开始" th:checked="${order.status == 1}" th:disabled="${order.status !=1}">
                        <input type="radio" name="status" value="2" title="准备中"  th:checked="${order.status == 2}" th:disabled="${order.status !=2}">
                        <input type="radio" name="status" value="3" title="已开始"  th:checked="${order.status == 3}" th:disabled="${order.status !=3}">
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">订购时间</label>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input"readonly  name="orderDate" th:value="${order.orderDate}"  lay-verify="required" id="orderDate" placeholder="yyyy-MM-dd HH:mm:ss">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">要求日期</label>
                        <div class="layui-input-inline">
                            <input type="text" readonly class="layui-input" name="requireDate" th:value="${order.requireDate}" lay-verify="required" id="requireDate" placeholder="yyyy-MM-dd HH:mm:ss">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">订单要求</label>
                    <div class="layui-input-inline">
                        <input type="text" name="unitPrice" readonly  th:value="${order.example}"  placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>


            </div>
        </div>
    </div>

    <hr class="layui-bg-orange">

    <div class="container">
        <div class="row clearfix">
            <div class="col-md-6 column">

                <div class="layui-form-item">
                    <label class="layui-form-label">面料选择</label>
                    <div class="layui-input-inline">
                        <select name="liningId" id="liningId"   lay-verify="required" >
                            <option th:each="f : ${map.lining}"  th:value="${f.id}" th:text="${f.materialName}" ></option>
                        </select>
                    </div>


                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">数量</label>
                    <div class="layui-input-inline">
                        <input type="text" name="liningNum" id="liningNum"   placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>

                    <button type="button" class="layui-btn" lay-submit="" lay-filter="add0">添加</button>
                </div>



                <div>
                    <table class="layui-hide" id="lining0" lay-filter="lining0" align="center"></table>

                    <!--        表格右侧操作栏-->
                    <script type="text/html" id="barDemo">
                        <button type="button" class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delete"><i class="layui-icon layui-icon-delete"></i>删除</button>
                    </script>
                </div>

            </div>
            <div class="col-md-6 column">


                <div class="layui-form-item">
                    <label class="layui-form-label">辅料选择</label>
                    <div class="layui-input-inline">
                        <select name="liningId1" id="liningId1"   lay-verify="required" >
                            <option th:each="f : ${map.ingredients}"  th:value="${f.id}" th:text="${f.materialName}" ></option>
                        </select>
                    </div>


                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">数量</label>
                    <div class="layui-input-inline">
                        <input type="text" name="liningNum1" id="liningNum1"    placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>

                    <button type="button" class="layui-btn" lay-submit="" lay-filter="add1">添加</button>
                </div>



                <div>
                    <table class="layui-hide" id="lining1" lay-filter="lining1" align="center"></table>

                    <!--        表格右侧操作栏-->
                    <script type="text/html" id="barDemo1">
                        <button type="button" class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delete"><i class="layui-icon layui-icon-delete"></i>删除</button>
                    </script>
                </div>

            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">负责人</label>
                <div class="layui-input-inline">
                    <input type="text" name="username"readonly id="principal" th:value="${procurementOrders.principal}" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                </div>
                <label class="layui-form-label">评估时间</label>
                <div class="layui-input-inline">
                    <input type="text" name="username" id="principalDate" readonly th:value="${procurementOrders.principalDate}" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
    </div>





    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="button" id="cancel" class="layui-btn ">取消</button>
            <button type="button" class="layui-btn" lay-submit="" lay-filter="sub">立即提交</button>
        </div>
    </div>

</form>



</body>
<script th:src="@{/layui/layui.js}"></script>
<script th:inline="none">
    //JavaScript代码区域
    layui.use(['element','form','upload','layer','table','laydate'], function() {
        var element = layui.element;
        var form = layui.form;
        var upload = layui.upload;
        var layer = layui.layer;
        var table = layui.table;
        var laydate = layui.laydate;
        var $ = layui.$;




        //表格初始化
        table.render({
            elem: '#lining0'
            ,url:baseUrl+'procurement/orders/materialList'
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,width: 560
            ,cols: [[
                {field:'liningId', width:100, title: '物料编号'}
                ,{field:'orderId', width:100, title: '订单编号',hide:true}
                ,{field:'liningType', width:100, title: '物料类别',hide:true}
                ,{field:'liningName', width:100, title: '物料名称'}
                ,{field:'liningNum', width:100, title: '所需数量',edit:'text'}
                ,{field:'liningPrice', width:75, title: '单价'}
                ,{field:'liningSubtotal', width:75, title: '小计'}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:100}

            ]]
            ,page:true
            ,where: {
                orderId:$("#orderId").val(),
                liningType:0

            } //设定异步数据接口的额外参数

        });


        //表格初始化
        table.render({
            elem: '#lining1'
            ,url:baseUrl+'procurement/orders/materialList'
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,width: 560
            ,cols: [[
                {field:'liningId', width:100, title: '物料编号'}
                ,{field:'orderId', width:100, title: '订单编号',hide:true}
                ,{field:'liningType', width:100, title: '物料类别',hide:true}
                ,{field:'liningName', width:100, title: '物料名称'}
                ,{field:'liningNum', width:100, title: '所需数量',edit:'text'}
                ,{field:'liningPrice', width:75, title: '单价'}
                ,{field:'liningSubtotal', width:75, title: '小计'}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo1', width:100}

            ]]
            ,page:true
            ,where: {
                orderId:$("#orderId").val(),
                liningType:1

            } //设定异步数据接口的额外参数

        });


        //面料add
        form.on('submit(add0)', function(data){

            //发送ajax请求  编辑APP信息
            $.ajax({
                url:baseUrl+"procurement/orders/addMaterial",
                data:{orderId:$("#orderId").val(),liningType:0,liningId:$("#liningId").val(),liningNum:$("#liningNum").val()},
                type:"post",
                dataType:"json",
                success:function (result) {
                    if (result.code==0){
                        table.reload('lining0', {
                            url: baseUrl+'procurement/orders/materialRefresh'
                            ,where: {
                                orderId:$("#orderId").val(),
                                liningType:0

                            } //设定异步数据接口的额外参数

                        });
                    }else {
                        layer.open({
                            title: '编辑菜品信息'
                            ,content: result.msg
                        });
                    }
                },
                error:function () {
                    layer.msg("服务器原地爆炸,请联系管理员!!!");
                }
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。

        });

        //辅料add
        form.on('submit(add1)', function(data){

            //发送ajax请求  编辑APP信息
            $.ajax({
                url:baseUrl+"procurement/orders/addMaterial",
                data:{orderId:$("#orderId").val(),liningType:1,liningId:$("#liningId1").val(),liningNum:$("#liningNum1").val()},
                type:"post",
                dataType:"json",
                success:function (result) {
                    if (result.code==0){
                        table.reload('lining1', {
                            url: baseUrl+'procurement/orders/materialRefresh'
                            ,where: {
                                orderId:$("#orderId").val(),
                                liningType:1

                            } //设定异步数据接口的额外参数

                        });
                    }else {
                        layer.open({
                            title: '编辑菜品信息'
                            ,content: result.msg
                        });
                    }
                },
                error:function () {
                    layer.msg("服务器原地爆炸,请联系管理员!!!");
                }
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。

        });


        //修改数量
        table.on('edit(lining0)', function(obj){ //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"

            //发送ajax请求  编辑APP信息

            $.ajax({
                url:baseUrl+"procurement/orders/editMaterial",
                data:obj.data,
                type:"post",
                dataType:"json",
                success:function (result) {
                    if (result.code==0){
                        table.reload('lining0', {
                            url: baseUrl+'procurement/orders/materialRefresh'
                            ,where: {
                                orderId:$("#orderId").val(),
                                liningType:0

                            } //设定异步数据接口的额外参数

                        });
                    }else {
                        layer.open({
                            title: '编辑菜品信息'
                            ,content: result.msg
                        });
                    }
                },
                error:function () {
                    layer.msg("服务器原地爆炸,请联系管理员!!!");
                }
            })

        });

        //修改数量
        table.on('edit(lining1)', function(obj){ //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"

            //发送ajax请求  编辑APP信息

            $.ajax({
                url:baseUrl+"procurement/orders/editMaterial",
                data:obj.data,
                type:"post",
                dataType:"json",
                success:function (result) {
                    if (result.code==0){
                        table.reload('lining1', {
                            url: baseUrl+'procurement/orders/materialRefresh'
                            ,where: {
                                orderId:$("#orderId").val(),
                                liningType:1

                            } //设定异步数据接口的额外参数

                        });
                    }else {
                        layer.open({
                            title: '编辑菜品信息'
                            ,content: result.msg
                        });
                    }
                },
                error:function () {
                    layer.msg("服务器原地爆炸,请联系管理员!!!");
                }
            })

        });

        //行工具栏事件
        table.on('tool(lining0)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
           if(layEvent === 'delete'){//删除

            var indexss= layer.confirm('是否确认删除？', {
                    btn: ['yes', 'no'] //可以无限个按钮
                    ,yes: function(index, layero){
                        //按钮【按钮三】的回调
                        obj.del();

                        $.ajax({
                            url:baseUrl+"procurement/orders/delMaterial",
                            data:{"id":data.orderId,"liningId":data.liningId,"liningType":data.liningType},
                            type:"post",
                            dataType:"json",
                            success:function (result) {
                                if (result.code==0){
                                   layer.close(indexss)

                                }else {
                                    layer.open({
                                        title: '删除菜品分类信息'
                                        ,content: result.msg
                                    });
                                }
                            },
                            error:function () {
                                layer.msg("服务器原地爆炸,请联系管理员!!!");
                            }
                        })
                        obj.del();
                    }
                },function(index, layero){
                    //按钮【按钮一】的回调

                });


            }
        });

        //行工具栏事件
        table.on('tool(lining1)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            if(layEvent === 'delete'){//删除

                var indexss= layer.confirm('是否确认删除？', {
                    btn: ['yes', 'no'] //可以无限个按钮
                    ,yes: function(index, layero){
                        //按钮【按钮三】的回调
                        obj.del();

                        $.ajax({
                            url:baseUrl+"procurement/orders/delMaterial",
                            data:{"id":data.orderId,"liningId":data.liningId,"liningType":data.liningType},
                            type:"post",
                            dataType:"json",
                            success:function (result) {
                                if (result.code==0){
                                    layer.close(indexss)

                                }else {
                                    layer.open({
                                        title: '删除菜品分类信息'
                                        ,content: result.msg
                                    });
                                }
                            },
                            error:function () {
                                layer.msg("服务器原地爆炸,请联系管理员!!!");
                            }
                        })
                        obj.del();
                    }
                },function(index, layero){
                    //按钮【按钮一】的回调

                });


            }
        });








        //取消
        $("#cancel").click(function (){

            var  index = layer.confirm('确定要取消吗？取消后数据不会保存！', {
                btn: ['确定', '取消'] //可以无限个按钮
                , yes: function (index, layero) {

                    layer.close(index)
                    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                    parent.layer.close(index); //再执行关闭

                    //发送ajax请求  编辑APP信息
                    $.ajax({
                        url:baseUrl+"procurement/orders/delAllMap",
                        data:{"id":$("#orderId").val()},
                        type:"post",
                        dataType:"json",
                        success:function (result) {
                            if (result.code==0){

                            }else {
                                layer.open({
                                    title: '编辑菜品信息'
                                    ,content: result.msg
                                });
                            }
                        },
                        error:function () {
                            layer.msg("服务器原地爆炸,请联系管理员!!!");
                        }
                    })


                }
                , btn2: function (index, layero) {

                }
            });



        });




        //添加
        form.on('submit(sub)', function(data){


            //发送ajax请求  编辑APP信息
            $.ajax({
                url:baseUrl+"procurement/orders/saveMap",
                data:{"id":$("#orderId").val(),principal:$("#principal").val(),principalDate:$("#principalDate").val()},
                type:"post",
                dataType:"json",
                success:function (result) {
                    if (result.code==0){

                        layer.open({
                            title: '修改促销信息'
                            ,content: '修改成功！'
                            ,end:function () {
                                //当你在iframe页面关闭自身时
                                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                                parent.layer.close(index); //再执行关闭
                            }
                        });


                    }else {
                        layer.open({
                            title: '修改采购单失败！'
                            ,content: result.msg
                        });
                    }
                },
                error:function () {
                    layer.msg("服务器原地爆炸,请联系管理员!!!");
                }
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。

        });


    });

</script>
</html>